import classnames from 'classnames'

import Icon from '@/components/Icon'
import Image from '@/components/Image'

import styles from './index.module.scss'
import { Article } from '@/types/data'
import relativeTime from 'dayjs/plugin/relativeTime'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { useHistory } from 'react-router-dom'

dayjs.locale('zh-cn')

// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)

type Props = {
  article: Article
}

const ArticleItem = ({article}: Props) => {
  const {
    cover: {type, images},
    title,
    aut_name,
    comm_count,
    pubdate
  } = article;

  const history = useHistory();

  const gotoAritcleDetail = (articleId: string) => {
    history.push(`/article/${articleId}`)
  }

  return (
    <div className={styles.root} onClick={() => {
      gotoAritcleDetail(article.art_id)
    }}>
      <div
        className={classnames(
          'article-content',
          type === 3 && 't3',
          type === 0 && 'none-mt'
        )}
      >
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {
              images.map((img, index) => (
                <div key={index} className="article-img-wrapper">
                  <Image
                    src={img}
                  />
                </div>
              ))
            }
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{aut_name}</span>
        <span>{comm_count} 评论</span>
        <span>{dayjs(pubdate).fromNow()}</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
